require('./Detailwrap.styl');
const { Boxs, Context, Avatar, Group, TextField } = SaltUI;
const { HBox, Box, VBox } = Boxs;
const avatarColors = ['#00A0E9'];
const File = require('images/svg/file.svg');
const classNames = require("classnames");
import { monStorage, Storage } from 'clientConfig/util/StoreData';
import { debug } from 'util';
const handleClick = (index, cb) => {
    cb && cb(index)
}
const downLoadFile = (file_id, file_name) => {
    if (!file_id) return;
    if (window.isBp) {
        var a = document.createElement('a');
        a.href = "http://120.55.85.1:8091/its/download_file?file_id=" + file_id;
        a.target = '_blank'
        document.body.appendChild(a);
        a.click();
        a.remove()
    } else if (DingTalkPC) {
        if (DingTalkPC.ua.isDesktop) {
            //pc微应用
            DingTalkPC.biz.util.downloadFile({
                url: "http://120.55.85.1:8091/its/download_file?file_id=" + file_id, //要下载的文件的url
                name: file_name, //定义下载文件名字
                onProgress: function (msg) {
                    // 文件下载进度回调
                },
                onSuccess: function (result) {
                    if (result) {
                        Toast.show({
                            type: 'success',
                            content: "文件下载成功",
                        });
                    } else {
                        Toast.show({
                            type: result,
                            content: "文件下载未成功",
                        });
                    }
                },
                onFail: function () { }
            })
        } else {
            dd.biz.util.openLink({
                url: "http://120.55.85.1:8091/its/download_file?file_id=" + file_id,//要打开链接的地址
                onSuccess: function (result) {
                },
                onFail: function (err) { }
            })
        }
    }

}
const Detailwrap = {
    head: (props) => {
        // debugger
        return (
            <HBox vAlign="center" className="detailwrap head">
                <Box >
                    <Avatar
                        name={props.name}
                        size={41}
                        colors={avatarColors}
                    />
                </Box>
                <VBox hAlign="start" className="head-content">
                    <Box>{props.name}</Box>
                    <Box>{props.statue}</Box>
                </VBox>
            </HBox>)
    },
    item: (props) => {
        return (
            <div className="detailwrap item">
                <HBox vAlign="center">
                    <Box flex={1}>
                        <Avatar
                            name={props.sender}
                            size={41}
                            colors={avatarColors}
                        />
                    </Box>
                    <Box flex={3} className="content-space tCL">
                        <span><span className="name">{props.sender == monStorage.get('user.nickname') ? "我" : props.sender}</span><span className="t-FAL content-width1 t-SML25">发起审批</span></span>
                        <span className="t-FAL t-FR content-width">{props.begin_date}</span>
                    </Box>
                </HBox>
                {props.approvers && props.approvers.map((item, index) => {
                    return (
                        <div>
                            <div className="line"></div>
                            <HBox vAlign="center">
                                <Box flex={1}>
                                    <Avatar
                                        name={item.ender}
                                        size={41}
                                        colors={avatarColors}
                                    />
                                </Box>
                                <Box flex={3} className="content-space tCL">
                                    <span><span className="name">{item.ender == monStorage.get('user.nickname') ? "我" : item.ender} </span><span className="t-FAL content-width1 t-SML25">{item.statue}</span></span>
                                    <span className="t-FAL t-FR content-width">{item.end_date}</span>
                                    {item.process_result && <p className="t-MT8">{item.process_result.content}</p>}
                                </Box>
                            </HBox>
                        </div>)
                })}
            </div>
        )
    },
    attachment: (props) => {
        if (props.attachment)
            var attachments = JSON.parse(props.attachment)
        return (
            <div className={classNames("t-FAC t-MT11")} >
                <Group.List>
                    <HBox>
                        <Box flex={0.5}>
                            <TextField
                                label="下载附件"
                                readOnly={true}
                            />
                        </Box>
                        <Box flex={1}>
                            <File height="20" width="18" className="fileFormIcon" />
                        </Box>
                    </HBox>
                    <VBox>
                        {attachments instanceof Array && attachments.map((item, index) => {
                            return (
                                <Box className="file-show" onClick={() => { downLoadFile(item.fileId, item.fileName) }}>
                                    {item.fileName} {item.file_version && <span className="t-ML20">版本号:{item.file_version == 'undefined' ? '无' : item.file_version}</span>}
                                </Box>
                            );
                        })}
                    </VBox>
                </Group.List>
            </div>)
    },
    foot: (props) => {
        return (
            <div className={classNames("t-FAC", "foot", "detailwrap")}>
                {props.footBtns.map((item, index) => {
                    return (
                        <span onClick={() => handleClick(index, props.cb)}>
                            {item}
                        </span>)
                })}
            </div>)
    }

}
module.exports = Detailwrap;
